html,
body {
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.bg,
.mask,
.info {
    position: absolute;
    width: 100%;
    height: 100%;
}

.info {
    z-index: 1000;
}

.mask {
    z-index: 999;
    background: rgb(0, 0, 0, .5)
}

.bg {
    z-index: 998;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: blur(50px);
}

.bg>img {
    height: 120%;
}

.disk {
    width: 6.46875rem;
    height: 6.46875rem;
    background: url(../img/disc.png);
    background-size: cover;
    margin: auto;
    margin-top: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 使用定义的roll动画 */
    animation: roll 20s infinite linear;
    /* 控制动画暂停和播放的状态属性 */
    /* animation-play-state */
    animation-play-state: paused;
}

.play_state {
    animation-play-state: running;
}

.album_img {
    width: 68%;
    height: 68%;
    overflow: hidden;
    border-radius: 50%;

}

.album_img img {
    width: 100%;
}

.lyric h3 {
    color: white;
    font-style: .40625rem;
    text-align: center;
    padding: .40625rem;
    margin-top: .46875rem;
}

.lyric p {
    color: white;
    font-size: .375rem;
    text-align: center;
    padding: 0 .40625rem;
    line-height: 2;
}

/* 旋转动画 */
@keyframes roll {

    /* 开始的时候选择角度为0 */
    0% {
        transform: rotate(0deg);
    }

    /* 结束的时候旋转角度为360 */
    100% {
        transform: rotate(360deg);
    }
}

/* range样式 */
.slider {
    width: 70%;
    margin: auto;
    position: fixed;
    bottom: 4.0625rem;
    left: 50%;
    transform: translateX(-50%);
}

.slider>input[type="range"] {
    width: 100%;
}

.comments {
    width: 100%;
    height: 17.5rem;
    position: absolute;
    top: 2.1875rem;
    z-index: 2000;
    overflow-x: hidden;
    overflow-y: scroll;

}

.comments_container {
    padding-top: .25rem;
    background: white;
    border-radius: .9375rem .9375rem 0 0;
    min-height: 17.5rem;
    position: relative;
}

.comments h3 {
    font-size: .5rem;
    color: #333;
    padding: .46875rem;
}

.com_header {
    font-size: .375rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem;

}

.send_comment {
    text-align: center;
}

.send_comment input[type="text"] {
    width: 80%;
    border: 1px solid #d6d6d6;
    outline: none;
    height: .8125rem;
    padding: .46875rem;
    border-radius: .3125rem;
    margin: .3125rem 0;
}

.comments_list li {
    border-bottom: 1px solid #e2e2e2;
    padding: .46875rem .625rem;
}

.send_comment textarea {
    width: 80%;
    border: 1px solid #d6d6d6;
    outline: none;
    border-radius: .3125rem;
}

.comments_button {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: white;
}

h5 {
    position: absolute;
    top: 0px;
    right: 10px;
}